<div class="toolbar" role="banner">
	<img
		width="40"
		alt="Angular Logo"
		src=""
	/>
</div>

<div class="content" role="main">
	<div>
		{{ LL.SELECTED_LOCALE() }}

		<select [(ngModel)]="selectedLocale" (change)="setLocale()">
			<option disabled>{{ LL.CHOOSE_LOCALE() }}</option>
			<option *ngFor="let locale of locales" [ngValue]="locale">{{ locale }}</option>
		</select>
	</div>

	<div>
		<h2>{{ LL.HI({ name: title }) }}</h2>
	</div>

	<div>
		<p>{{ LL.YOUR_NAME() }}</p>
		<input type="text" [(ngModel)]="title" />
	</div>

	<div>
		{{ LL.TODAY({ date: now }) }}
	</div>

	<div>
		<label>
			{{ LL.APPLES_LABEL() }}:
			<input type="number" [(ngModel)]="nrOfApples" min="{0}" />
		</label>

		<label>
			{{ LL.BANANAS_LABEL() }}:
			<input type="number" [(ngModel)]="nrOfBananas" min="{0}" />
		</label>
	</div>

	<div>
		<p>{{ LL.FRUITS({ nrOfApples, nrOfBananas }) }}</p>
	</div>
</div>
